<template>
    <div class="videoPlayback">
        <!-- 录像回放区域 -->
        <div class="tab-b">
            <i @click="onBtnClose(0, 'all', 10)" class="iconfont iconguanbi"></i>
            <div class="playback" :class="switchBlockClass">
                <div class="screen" :class="item.videoClass" v-for="(item, i) in switchBlockNum" :key="i" :id="item.id">
                    <!-- 视频名称 -->
                    <div class="topShade">
                        <!-- <span v-if="backEqName !== ''">{{ backEqName }}</span> -->
                    </div>
                    <!-- 视频 -->
                    <video :id="item.videoClass" autoplay webkit-playsinline playsinline></video>
                    <!-- 全屏当前回放 -->
                    <!-- <div class="btn-full-screen" @click="FullScreen(item.videoClass)"><i class="iconfont iconquanping"></i></div> -->
                    <div class="bottomShade">
                        <!--进度条-->
                        <el-slider :max="max" @change="timelinn(item.videoClass, timelink, i + 1)" :show-tooltip="false"></el-slider>
                        <!--播放按钮-->
                        <div class="playBtn"><i style="cursor: pointer;" :class="icon" @click="resume(item.videoClass, i + 1)" class="play"></i></div>

                        <!-- 倍速选择 -->
                        <div class="speedChoice">
                            <div class="speedVal">
                                <div class="slower"><i class="iconfont icon_jiansu1" @click="speedChange('slower', item.videoClass, i + 1)"></i></div>
                                <div class="val"><span>1x</span></div>
                                <div class="faster"><i class="iconfont icon_jiasu1" @click="speedChange('faster', item.videoClass, i + 1)"></i></div>
                            </div>
                        </div>

                        <!-- 时间显示-->
                        <div class="timeShow">
                            <span class="current">{{ currentTime }}</span>
                            <span>/</span>
                            <span class="total">{{ backTotal }}</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="screenControl" id="screenControl">
                <div>
                    <!-- <p class="rightControl" @click="onBtnClose(0, 'all', 10)">
                        <i class="iconfont icon_guanbiquanbu"></i>
                        <span>关闭全部</span>
                    </p> -->
                    <!-- <p class="rightControl" :class="{ switchBlockNumActive: switchBlockNum.length == 1 }" @click="onSwitchBlock(1)">
                        <i class="iconfont icon_fenpingbuju_3"></i>
                        <span>单屏</span>
                    </p>
                    <p class="rightControl" :class="{ switchBlockNumActive: switchBlockNum.length == 4 }" @click="onSwitchBlock(4)">
                        <i class="iconfont icon_fenpingbuju_"></i>
                        <span>四屏</span>
                    </p>
                    <p class="rightControl" :class="{ switchBlockNumActive: switchBlockNum.length == 9 }" @click="onSwitchBlock(9)">
                        <i class="iconfont icon_fenpingbuju_5"></i>
                        <span>九屏</span>
                    </p> -->
                </div>
            </div>
            <Modal v-model="picModal" title="快照回放" :footer-hide="true">
                <div class="pic"><img :src="url" /></div>
            </Modal>
        </div>
    </div>
</template>

<script>
/* eslint-disable */
import $ from 'jquery';
import './adapter.js';
import './platform.js';
import { H5sPlayerWS, H5sPlayerHls, H5sPlayerRTC } from './h5splayer.js';
import { H5siOS, H5sPlayerCreate, H5sSafariBrowser, GetURLParameter } from './h5splayerhelper.js';
import Vue from 'vue';
import Liveplayer from './videoPlayer.vue';
import { uniqueKey } from 'highcharts';
export default {
    name: 'GWVideoPlaybackCom',
    props: ['GWVideoPlaybackComValue'],
    components: {
        'v-liveplayer': Liveplayer
    },
    data () {
        return {
            videoPanelClass: 'videoPanelClass4',
            changePanelNum: 4,
            spanActive: true,
            // 回放总时间与进行时间
            backTotal: '00:00:00',
            currentTime: '00:00:00',
            // 当前通道是否被选中
            roadTag: false,
            // 视频要被减去的高度
            videoPerHeight: 32,
            screenWidth: 0,
            setZoom: 0,
            backEqName: '',
            picModal: false,
            url: this.$store.state.serverUrl,
            realData: '',
            rows: 2,
            cols: 2,
            selectCol: 1,
            selectRow: 1,
            contentHeight: '',
            cProto: 'RTC',
            clickVideoId: 'h11',
            clickH5VideoId: 'hvideo11',
            downLoad: false,
            backVideo: undefined,
            backVideo1: undefined,
            backVideo2: undefined,
            backVideo3: undefined,
            backVideo4: undefined,
            backVideo5: undefined,
            backVideo6: undefined,
            backVideo7: undefined,
            backVideo8: undefined,
            backVideo9: undefined,
            region1: 1, // 倍速
            region2: 1, // 倍速
            region3: 1, // 倍速
            region4: 1, // 倍速
            region5: 1, // 倍速
            region6: 1, // 倍速
            region7: 1, // 倍速
            region8: 1, // 倍速
            region9: 1, // 倍速
            region: 1, // 倍速
            displayc: '', // 实时时间
            rowstarf: '', // 跟进进度条开始时间
            rowend: '', // 进度条结束时间
            timelink: 0, // 滑块
            max: 0, // 滑块最大值
            icon: 'iconfont icon_bofang', // 暂停图片
            activeName: 'first',

            searchTime: [],
            searchType: 'record',
            cToken: '',
            docData: [],
            options: [
                {
                    value: 'snapshot',
                    label: '查看快照'
                },
                {
                    value: 'record',
                    label: '查看回放'
                }
            ],
            // 分支列表数据
            onlineData: [
                {
                    label: '中心',
                    children: []
                }
            ],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            defaultProps2: {
                children: 'children',
                label: 'label'
            },
            headerTba: 2,
            loadingEquipList: true,
            switchBlockNum: [
                {
                    id: 'backVideo-1',
                    videoClass: 'videoClass-1',
                    ch: 'aaaa'
                }
            ],
            switchBlockClass: 'switchBlockClass-1',

            videoUrlList: [],

            backVideoList: [],
            equipInputSc: ''
        };
    },

    // 监听关闭视频
    computed: {
        myValue () {
            return this.$store.state.videoList;
        }
    },

    watch: {
        myValue: function (newVal, oldVal) {
            let videoList = this.$store.state.videoList; //取仓库数据
        }
    },

    mounted () {
        // 根据屏幕分辨率的不同对zoom做出调整
        let screenWidth = $(document.body).width();
        this.screenWidth = screenWidth;
        if (screenWidth <= 1280) {
            this.videoPerHeight = 54;
        } else {
            this.videoPerHeight = 32;
        }

        // console.log('接受要播放的视频---', this.GWVideoPlaybackComValue);
        this.checkInfo(this.GWVideoPlaybackComValue);
    },
    beforeRouteLeave (to, from, next) {
        try {
            this.$store.state.usingEq = [];
            this.$root.bus.$emit('closeAllVideo', 1);
        } catch (e) { }
        next();
    },
    beforeRouteUpdate () {
        this.onBtnClose(0, 'all', 10);
    },
    beforeDestroy () {
        this.onBtnClose(0, 'all', 10);
    },

    destroyed () {
        this.onBtnClose(0, 'all', 10);
    },
    methods: {
        aaaa () {
            console.log(55555);
        },

        // 关闭回放
        onBtnClose (no, classH, videoIds) {
            console.log('组件关闭回放---');
            let docData = this.docData;
            if (no) {
                if (videoIds == 1 && this.backVideo1 != undefined) {
                    this.backVideo1.disconnect();
                    delete this.backVideo1;
                    this.backVideo1 = undefined;
                }
                if (videoIds == 2 && this.backVideo2 != undefined) {
                    this.backVideo2.disconnect();
                    delete this.backVideo2;
                    this.backVideo2 = undefined;
                }
                if (videoIds == 3 && this.backVideo3 != undefined) {
                    this.backVideo3.disconnect();
                    delete this.backVideo3;
                    this.backVideo3 = undefined;
                }
                if (videoIds == 4 && this.backVideo4 != undefined) {
                    this.backVideo4.disconnect();
                    delete this.backVideo4;
                    this.backVideo4 = undefined;
                }
                if (videoIds == 5 && this.backVideo5 != undefined) {
                    this.backVideo5.disconnect();
                    delete this.backVideo5;
                    this.backVideo5 = undefined;
                }
                if (videoIds == 6 && this.backVideo6 != undefined) {
                    this.backVideo6.disconnect();
                    delete this.backVideo6;
                    this.backVideo6 = undefined;
                }
                if (videoIds == 7 && this.backVideo7 != undefined) {
                    this.backVideo7.disconnect();
                    delete this.backVideo7;
                    this.backVideo7 = undefined;
                }
                if (videoIds == 8 && this.backVideo8 != undefined) {
                    this.backVideo8.disconnect();
                    delete this.backVideo8;
                    this.backVideo8 = undefined;
                }
                if (videoIds == 9 && this.backVideo9 != undefined) {
                    this.backVideo9.disconnect();
                    delete this.backVideo9;
                    this.backVideo9 = undefined;
                }

                let downUrl = $('.' + classH).attr('downUrl');

                $('.' + classH + ' video').attr('src', '0');
                $('.' + classH + ' video').attr('poster', '0');
                $('.' + classH + ' video').html('');
                $('.' + classH + ' .bottomShade').css('display', 'none');

                let videoUrlList = this.videoUrlList;
                for (var i = 0; i < videoUrlList.length; i++) {
                    if (videoUrlList[i] == downUrl) {
                        videoUrlList.splice(i, 1);
                    }
                }
                this.videoUrlList = videoUrlList;

                // 点击高亮
                docData.forEach((item, i) => {
                    if (downUrl == item.data.downUrl) {
                        item.data.active = '';
                    }
                });
            } else {
                // 关闭所有回放视频
                if (this.backVideo1 != undefined) {
                    this.backVideo1.disconnect();
                    delete this.backVideo1;
                    this.backVideo1 = undefined;
                }
                if (this.backVideo2 != undefined) {
                    this.backVideo2.disconnect();
                    delete this.backVideo2;
                    this.backVideo2 = undefined;
                }
                if (this.backVideo3 != undefined) {
                    this.backVideo3.disconnect();
                    delete this.backVideo3;
                    this.backVideo3 = undefined;
                }
                if (this.backVideo4 != undefined) {
                    this.backVideo4.disconnect();
                    delete this.backVideo4;
                    this.backVideo4 = undefined;
                }
                if (this.backVideo5 != undefined) {
                    this.backVideo5.disconnect();
                    delete this.backVideo5;
                    this.backVideo5 = undefined;
                }
                if (this.backVideo6 != undefined) {
                    this.backVideo6.disconnect();
                    delete this.backVideo6;
                    this.backVideo6 = undefined;
                }
                if (this.backVideo7 != undefined) {
                    this.backVideo7.disconnect();
                    delete this.backVideo7;
                    this.backVideo7 = undefined;
                }
                if (this.backVideo8 != undefined) {
                    this.backVideo8.disconnect();
                    delete this.backVideo8;
                    this.backVideo8 = undefined;
                }
                if (this.backVideo9 != undefined) {
                    this.backVideo9.disconnect();
                    delete this.backVideo9;
                    this.backVideo9 = undefined;
                }

                $('.tab-b video').attr('src', '0');
                $('.tab-b video').attr('poster', '0');
                $('.tab-b video').html('');

                $('.bottomShade').css('display', 'none');

                this.videoUrlList = [];
                docData.forEach((item, i) => {
                    item.data.active = '';
                });
            }

            this.docData = docData;
        },
        // 回放切屏1、4、9
        onSwitchBlock (no) {
            let docData = this.docData;
            let videoUrlList = this.videoUrlList;
            if (no === 1) {
                if (this.videoUrlList.length > 1) {
                    this.videoUrlList = this.videoUrlList.splice(0, 1);
                }
                this.switchBlockNum = [
                    {
                        id: 'backVideo-1',
                        videoClass: 'videoClass-1',
                        ch: 'aaaa'
                    }
                ];
                this.switchBlockClass = 'switchBlockClass-1';
                if (this.backVideo2 != undefined) {
                    this.backVideo2.disconnect();
                    delete this.backVideo2;
                    this.backVideo2 = undefined;
                }
                if (this.backVideo3 != undefined) {
                    this.backVideo3.disconnect();
                    delete this.backVideo3;
                    this.backVideo3 = undefined;
                }
                if (this.backVideo4 != undefined) {
                    this.backVideo4.disconnect();
                    delete this.backVideo4;
                    this.backVideo4 = undefined;
                }
                if (this.backVideo5 != undefined) {
                    this.backVideo5.disconnect();
                    delete this.backVideo5;
                    this.backVideo5 = undefined;
                }
                if (this.backVideo6 != undefined) {
                    this.backVideo6.disconnect();
                    delete this.backVideo6;
                    this.backVideo6 = undefined;
                }
                if (this.backVideo7 != undefined) {
                    this.backVideo7.disconnect();
                    delete this.backVideo7;
                    this.backVideo7 = undefined;
                }
                if (this.backVideo8 != undefined) {
                    this.backVideo8.disconnect();
                    delete this.backVideo8;
                    this.backVideo8 = undefined;
                }
                if (this.backVideo9 != undefined) {
                    this.backVideo9.disconnect();
                    delete this.backVideo9;
                    this.backVideo9 = undefined;
                }
            }
            if (no === 4) {
                this.switchBlockNum = [
                    {
                        id: 'backVideo-1',
                        videoClass: 'videoClass-1'
                    },
                    {
                        id: 'backVideo-2',
                        videoClass: 'videoClass-2'
                    },
                    {
                        id: 'backVideo-3',
                        videoClass: 'videoClass-3'
                    },
                    {
                        id: 'backVideo-4',
                        videoClass: 'videoClass-4'
                    }
                ];
                this.switchBlockClass = 'switchBlockClass-4';
                if (this.videoUrlList.length > 4) {
                    this.videoUrlList = this.videoUrlList.splice(0, 4);
                }

                if (this.backVideo5 != undefined) {
                    this.backVideo5.disconnect();
                    delete this.backVideo5;
                    this.backVideo5 = undefined;
                }
                if (this.backVideo6 != undefined) {
                    this.backVideo6.disconnect();
                    delete this.backVideo6;
                    this.backVideo6 = undefined;
                }
                if (this.backVideo7 != undefined) {
                    this.backVideo7.disconnect();
                    delete this.backVideo7;
                    this.backVideo7 = undefined;
                }
                if (this.backVideo8 != undefined) {
                    this.backVideo8.disconnect();
                    delete this.backVideo8;
                    this.backVideo8 = undefined;
                }
                if (this.backVideo9 != undefined) {
                    this.backVideo9.disconnect();
                    delete this.backVideo9;
                    this.backVideo9 = undefined;
                }
            }
            if (no === 9) {
                this.switchBlockNum = [
                    {
                        id: 'backVideo-1',
                        videoClass: 'videoClass-1'
                    },
                    {
                        id: 'backVideo-2',
                        videoClass: 'videoClass-2'
                    },
                    {
                        id: 'backVideo-3',
                        videoClass: 'videoClass-3'
                    },
                    {
                        id: 'backVideo-4',
                        videoClass: 'videoClass-4'
                    },
                    {
                        id: 'backVideo-5',
                        videoClass: 'videoClass-5'
                    },
                    {
                        id: 'backVideo-6',
                        videoClass: 'videoClass-6'
                    },
                    {
                        id: 'backVideo-7',
                        videoClass: 'videoClass-7'
                    },
                    {
                        id: 'backVideo-8',
                        videoClass: 'videoClass-8'
                    },
                    {
                        id: 'backVideo-9',
                        videoClass: 'videoClass-9'
                    }
                ];
                this.switchBlockClass = 'switchBlockClass-9';
            }

            // 循环截取高亮列表
            // docData
            docData.forEach((itemJ, J) => {
                itemJ.data.active = '';
                for (var i = 0; i < this.videoUrlList.length; i++) {
                    if (String(this.videoUrlList[i]) == String(itemJ.data.downUrl)) {
                        itemJ.data.active = 'active-li';
                    }
                }
            });
            this.docData = docData;
        },

        // 视频区域全屏显示
        FullScreen (event, other) {
            let aimDom = '';
            let elem = '';
            aimDom = '#' + event;
            elem = $(aimDom).get(0);
            if (document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled) {
                if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) {
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                    } else if (document.webkitExitFullscreen) {
                        document.webkitExitFullscreen();
                    } else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen();
                    } else if (document.msExitFullscreen) {
                        document.msExitFullscreen();
                    }

                    this.updateUIExitFullScreen();
                } else {
                    if (elem.requestFullscreen) {
                        elem.requestFullscreen();
                    } else if (elem.webkitRequestFullscreen) {
                        elem.webkitRequestFullscreen();
                    } else if (elem.mozRequestFullScreen) {
                        elem.mozRequestFullScreen();
                    } else if (elem.msRequestFullscreen) {
                        elem.msRequestFullscreen();
                    }
                }
            } else {
                console.log('您的浏览器不支持全屏');
            }
        },
        // 搜索筛选选择时间跨度
        checkTime () {
            if (!this.cToken) {
                this.messageType('warning', '请先选择对应设备！');
                this.searchTime = [];
                return;
            }
            if (this.searchTime) {
                this.searchRecord();
            } else {
                this.docData = [];
            }
        },
        // 回放列表切换
        listSw (no) {
            this.spanActive = no;
            this.searchType = no ? 'record' : 'snapshot';

            this.searchRecord();
        },
        // 消息提醒
        messageType (type, msg) {
            // 警告   warning
            // 成功  success
            // 取消   info
            this.$message({
                type: type,
                message: msg
            });
        },
        // 关闭所有实时视频
        closeAllVideo () {
            let set = this.$store.state.usingEq;
            let onlineData = this.onlineData[0].children;
            onlineData.forEach(item => {
                item.state = false;
            });
            this.onlineData[0].children = onlineData;

            if (this.$store.state.usingEq) {
                this.messageType('success', '关闭成功');
            }
            this.$store.state.usingEq = [];
            this.$root.bus.$emit('closeAllVideo');
        },
        // 下载视频
        videosDow (url, name) {
            fetch(url).then(res =>
                res.blob().then(blob => {
                    var a = document.createElement('a');
                    var url = window.URL.createObjectURL(blob);
                    var filename = 'file.mp4';
                    a.href = url;
                    a.download = filename;
                    a.click();
                    window.URL.revokeObjectURL(url);
                })
            );
        },

        // 下载图片
        downloadImg (url, fileName) {
            const img = new Image();
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            img.onload = function () {
                canvas.width = this.width;
                canvas.height = this.height;
                ctx.drawImage(this, 0, 0);

                const elt = document.createElement('a');
                elt.setAttribute('href', canvas.toDataURL('image/png'));
                elt.setAttribute('download', 'file.png');
                elt.style.display = 'none';
                document.body.appendChild(elt);
                elt.click();
                document.body.removeChild(elt);
            };
            img.crossOrigin = 'anonymous';
            img.src = url;
        },

        saveAs (data, name) {
            const urlObject = window.URL || window.webkitURL || window;
            const export_blob = new Blob([data]);
            const save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
            save_link.href = urlObject.createObjectURL(export_blob);
            save_link.download = name;
            save_link.click();
        },
        // 下载含有url的文件
        downloadUrlFile (url, fileName) {
            const url2 = url.replace(/\\/g, '/');
            const xhr = new XMLHttpRequest();
            xhr.open('GET', url2, true);
            xhr.responseType = 'blob';
            xhr.setRequestHeader('Authorization', 'Basic a2VybWl0Omtlcm1pdA==');
            xhr.onload = () => {
                if (xhr.status === 200) {
                    this.saveAs(xhr.response, fileName);
                }
            };
            xhr.send();
        },

        // 下载回放与快照
        downData (add, e) {
            if (this.searchType !== 'record') {
                this.downloadImg(this.$store.state.serverUrl + add, '.jpg');
                return;
            } else {
                this.$notify.info({
                    title: '',
                    message: '资源过大，正在下载请勿离开！',
                    type: 'success'
                });
                this.downloadUrlFile(this.$store.state.serverUrl + add, 'video.mp4');
            }
            return;
            e.stopPropagation();
            this.$notify.info({
                title: '',
                // message: this.searchType == 'record' ? '正在下载资源，请稍后 保存至本地: D:/Alarmcenter/data' : '正在下载资源，请稍后'
                message: '正在下载资源，请稍后'
            });
            this.downLoad = true;

            if (this.searchType == 'record') {
                setTimeout(() => {
                    this.$notify.info({
                        title: '',
                        message: '资源过大，正在下载，请稍后在本地: D:/Alarmcenter/data 查看',
                        type: 'success'
                    });
                    this.downLoad = false;
                }, 5000);
            }
            let downUrl = this.$store.state.serverUrl + add;

            this.$api
                .getVideoDownResource({
                    url: downUrl
                })
                .then(res => {
                    let code = res.data.Code;
                    if (code === 200) {
                        this.downLoad = false;
                        this.$notify({
                            title: '',
                            message: '已保存至本地: D:/Alarmcenter/data',
                            type: 'success'
                        });
                    }
                });
        },

        // 回放区块icon判断切换
        swIcon (videoClass, no) {
            if (this.backTotal === this.currentTime && this.currentTime !== "00:00:00") {
                this.currentTime = "00:00:00"
            }
            $('.' + videoClass + ' .playBtn>i');
            if ($('.' + videoClass + ' .playBtn>i').is('.icon_zanting1')) {
                $('.' + videoClass + ' .playBtn>i')
                    .removeClass('icon_zanting1')
                    .addClass('icon_bofang');

                switch (no) {
                    case 1:
                        this.backVideo1.pause();

                        break;
                    case 1:
                        this.backVideo1.pause();

                        break;
                    case 2:
                        this.backVideo2.pause();

                        break;
                    case 3:
                        this.backVideo3.pause();

                        break;
                    case 4:
                        this.backVideo4.pause();

                        break;
                    case 5:
                        this.backVideo5.pause();

                        break;
                    case 6:
                        this.backVideo6.pause();

                        break;
                    case 7:
                        this.backVideo7.pause();

                        break;
                    case 8:
                        this.backVideo8.pause();
                        break;
                    case 9:
                        this.backVideo9.pause();
                        break;
                    default:
                        break;
                }
            } else {
                $('.' + videoClass + ' .playBtn>i')
                    .removeClass('icon_bofang')
                    .addClass('icon_zanting1');
                switch (no) {
                    case 1:
                        this.backVideo1.resume();

                        break;
                    case 1:
                        this.backVideo1.resume();

                        break;
                    case 2:
                        this.backVideo2.resume();

                        break;
                    case 3:
                        this.backVideo3.resume();

                        break;
                    case 4:
                        this.backVideo4.resume();

                        break;
                    case 5:
                        this.backVideo5.resume();

                        break;
                    case 6:
                        this.backVideo6.resume();

                        break;
                    case 7:
                        this.backVideo7.resume();

                        break;
                    case 8:
                        this.backVideo8.resume();
                        break;
                    case 9:
                        this.backVideo9.resume();
                        break;
                    default:
                        break;
                }
            }
        },

        // 回放视频---开始\暂停
        resume (videoClass, no) {
            this.swIcon(videoClass, no);
        },
        // 回放视频滑块
        timelinn (videoClass, timelink, no) {
            let sliderRunway = $('.' + videoClass + ' .el-slider__runway').width();
            let sliderBarWidth = $('.' + videoClass + ' .el-slider__bar').width();
            let bfb = sliderBarWidth / sliderRunway;

            let getsecond = $('.' + videoClass).attr('getsecond');
            let timelinks = Math.ceil(Number(bfb * getsecond));
            switch (no) {
                case 1:
                    this.backVideo1.seek(timelinks);
                    break;
                case 2:
                    this.backVideo2.seek(timelinks);
                    break;
                case 3:
                    this.backVideo3.seek(timelinks);
                    break;
                case 4:
                    this.backVideo4.seek(timelinks);
                    break;
                case 5:
                    this.backVideo5.seek(timelinks);
                    break;
                case 6:
                    this.backVideo6.seek(timelinks);
                    break;
                case 7:
                    this.backVideo7.seek(timelinks);
                    break;
                case 8:
                    this.backVideo8.seek(timelinks);
                    break;
                case 9:
                    this.backVideo9.seek(timelinks);
                    break;

                default:
                    break;
            }
        },

        // 回放视频---播放速度调整
        speedChange (type, videoClass, no) {
            // speedVal
            let regions = $('.' + videoClass + ' .speedVal .val>span').html();

            regions = regions.substr(0, regions.length - 1);
            if (type === 'slower') {
                if (regions == 0.5) {
                    return;
                }
                $('.' + videoClass + ' .speedVal .val>span').html(regions / 2 + 'x');
            } else {
                if (regions == 16) {
                    return;
                }
                $('.' + videoClass + ' .speedVal .val>span').html(regions * 2 + 'x');
            }
            if (no === 1) {
                this.backVideo1.speed(regions);
            }
            if (no === 2) {
                this.backVideo2.speed(regions);
            }
            if (no === 3) {
                this.backVideo3.speed(regions);
            }
            if (no === 4) {
                this.backVideo4.speed(regions);
            }
            if (no === 5) {
                this.backVideo5.speed(regions);
            }
            if (no === 6) {
                this.backVideo6.speed(regions);
            }
            if (no === 7) {
                this.backVideo7.speed(regions);
            }
            if (no === 8) {
                this.backVideo8.speed(regions);
            }
            if (no === 9) {
                this.backVideo9.speed(regions);
            }
        },

        // 回放视频---倍速
        Speed () {
            if (this.backVideo === undefined) {
                this.$Notice.info({
                    title: '请选择视频'
                });
                return;
            }
            this.backVideo.speed(this.region);
        },

        // 关闭
        Close () {
            if (this.backVideo != undefined) {
                this.backVideo.disconnect();
                delete this.backVideo;
                this.backVideo = undefined;
            }
        },

        // 回放视频---多屏回放匹配对应区块
        matchingBlock (classH, strUUID, strTime) {
            $(classH).attr('strUUID', strUUID);

            let interval = this.getSecond($(classH).attr('rowstarf'), strTime);

            let getSecond = $(classH).attr('getSecond'); //总秒数
            if (interval >= getSecond) {
                $(classH + ' .playBtn>i')
                    .removeClass('icon_zanting1')
                    .addClass('icon_bofang');
            }
            // 视频总秒数
            let bfb = (interval / $(classH).attr('getSecond')) * 100 + '%';

            $(classH + ' .el-slider__bar').css('width', bfb);
            $(classH + ' .el-slider__button-wrapper').css('left', bfb);

            $(classH + ' .current').html(this.getFormatTime(interval));

            let starf = new Date($(classH).attr('rowstarf')).getTime() / 1000;
            let endd = new Date(strTime).getTime() / 1000;
            let staefend = endd - starf;

            // this.timelink = staefend;
        },

        PlaybackCB (event, userdata) {
            let msgevent = JSON.parse(event);

            if (msgevent.type === 'H5S_EVENT_PB_TIME') {
                if (msgevent.strTime == $('.videoClass-1').attr('time') || msgevent.strUUID == $('.videoClass-1').attr('strUUID')) {
                    this.matchingBlock('.videoClass-1', msgevent.strUUID, msgevent.pbTime.strTime);
                }

                if (msgevent.strTime == $('.videoClass-2').attr('time') || msgevent.strUUID == $('.videoClass-2').attr('strUUID')) {
                    this.matchingBlock('.videoClass-2', msgevent.strUUID, msgevent.pbTime.strTime);
                }
                if (msgevent.strTime == $('.videoClass-3').attr('time') || msgevent.strUUID == $('.videoClass-3').attr('strUUID')) {
                    this.matchingBlock('.videoClass-3', msgevent.strUUID, msgevent.pbTime.strTime);
                }
                if (msgevent.strTime == $('.videoClass-4').attr('time') || msgevent.strUUID == $('.videoClass-4').attr('strUUID')) {
                    this.matchingBlock('.videoClass-4', msgevent.strUUID, msgevent.pbTime.strTime);
                }
                if (msgevent.strTime == $('.videoClass-5').attr('time') || msgevent.strUUID == $('.videoClass-5').attr('strUUID')) {
                    this.matchingBlock('.videoClass-5', msgevent.strUUID, msgevent.pbTime.strTime);
                }
                if (msgevent.strTime == $('.videoClass-6').attr('time') || msgevent.strUUID == $('.videoClass-6').attr('strUUID')) {
                    this.matchingBlock('.videoClass-6', msgevent.strUUID, msgevent.pbTime.strTime);
                }
                if (msgevent.strTime == $('.videoClass-7').attr('time') || msgevent.strUUID == $('.videoClass-7').attr('strUUID')) {
                    this.matchingBlock('.videoClass-7', msgevent.strUUID, msgevent.pbTime.strTime);
                }
                if (msgevent.strTime == $('.videoClass-8').attr('time') || msgevent.strUUID == $('.videoClass-8').attr('strUUID')) {
                    this.matchingBlock('.videoClass-8', msgevent.strUUID, msgevent.pbTime.strTime);
                }
                if (msgevent.strTime == $('.videoClass-9').attr('time') || msgevent.strUUID == $('.videoClass-9').attr('strUUID')) {
                    this.matchingBlock('.videoClass-9', msgevent.strUUID, msgevent.pbTime.strTime);
                }
            }
        },

        // 返回开始时间与结束时间相差秒数
        getSecond (Stime, Etime) {
            var stimeSecond = new Date(Stime),
                etimeSecond = new Date(Etime);
            var leave = etimeSecond.getTime() - stimeSecond.getTime();

            return parseInt(leave) / 1000;
        },

        // 修改秒数的时间格式
        getFormatTime (seconds) {
            var parseTime = seconds;
            //seconde
            if (parseTime < 60) parseTime = '00:00:' + (parseTime < 10 ? '0' + parseTime : parseTime);
            //minute
            else if (parseTime >= 60 && parseTime < 3600) {
                var minute = parseTime / 60 + '';
                if (minute.indexOf('.') != -1) {
                    minute = minute.substr(0, minute.indexOf('.'));
                }
                var second = parseTime - 60 * parseInt(minute);
                parseTime = '00:' + (minute < 10 ? '0' + minute : minute) + ':';
                parseTime += second < 10 ? '0' + second : second;
            }
            //hour
            else if (parseTime >= 3600) {
                var hour = parseTime / 3600 + '';
                if (hour.indexOf('.') != -1) {
                    hour = hour.substr(0, hour.indexOf('.'));
                }
                var minute = parseTime - 3600 * parseInt(hour);
                minute = (parseTime - 3600 * parseInt(hour)) / 60 + '';
                if (minute.indexOf('.') != -1) {
                    minute = minute.substr(0, minute.indexOf('.'));
                }
                var second = parseTime - 3600 * parseInt(hour) - 60 * parseInt(minute);
                parseTime = (hour < 10 ? '0' + hour : hour) + ':';
                parseTime += (minute < 10 ? '0' + minute : minute) + ':';
                parseTime += second < 10 ? '0' + second : second;
            }
            return parseTime;
        },

        // 高亮
        downActive (url, type) {
            let docData = this.docData;
            // 点击高亮
            docData.forEach((item, i) => {
                if (!type) {
                    item.data.active = '';
                }
                if (url == item.data.downUrl) {
                    item.data.active = 'active-li';
                }
            });
            this.docData = docData;
        },

        // 开始播放录像回放
        checkInfo (row) {
            let docData = this.docData;
            let downUrl = row.data.downUrl;
            if (this.videoUrlList.length == 4 && this.switchBlockNum.length == 4) {
                return;
            }
            if (this.videoUrlList.length == 9 && this.switchBlockNum.length == 9) {
                return;
            }

            // 根据当前1、4、9屏 判断最多几个视频
            if (this.videoUrlList.length > 0 && this.videoUrlList.length < this.switchBlockNum.length) {
                if (this.videoUrlList.indexOf(downUrl) == -1) {
                    this.videoUrlList.push(downUrl);
                    this.downActive(downUrl, 1);
                }
            } else if (this.videoUrlList.length < this.switchBlockNum.length) {
                this.videoUrlList.push(downUrl);
                this.downActive(downUrl, 1);
            }

            // 只有单屏替换url高亮
            if (this.videoUrlList.length == 1 && this.switchBlockNum.length == 1) {
                this.videoUrlList = [];
                this.videoUrlList.push(downUrl);
                this.downActive(downUrl, 0);
                let docData = this.docData;
            }

            let videoid = 'videoClass-' + this.videoUrlList.length;
            $('.' + videoid + ' .bottomShade').css('display', 'block');
            $('.' + videoid).attr('time', row.data.strStartTime);
            $('.' + videoid).attr('strUUID', '666666');
            $('.' + videoid).attr('downUrl', downUrl);

            let dat = row.data;
            let path = dat.strPath;
            let interSec = this.getSecond(dat.strStartTime, dat.strEndTime);

            $('.' + videoid).attr('getSecond', interSec - 1);
            $('.' + videoid + ' .total').html(this.getFormatTime(interSec - 1)); //视频总时长

            let judge = path.substring(path.length - 3, path.length);
            if (judge !== 'jpg') {
                this.icon = 'iconfont icon_zanting1';

                // 断开连接
                this.rowstarf = dat.strStartTime;

                $('.' + videoid).attr('rowstarf', dat.strStartTime); //记录视频开始时间值
                this.rowend = dat.strEndTime;

                var pbconf1 = {
                    begintime: dat.strStartTime,
                    endtime: dat.strEndTime,
                    showposter: 'true', // 'true' or 'false' show poster
                    callback: this.PlaybackCB,
                    serverpb: 'true',
                    userdata: this // user data
                };
                let conf = {
                    videoid: videoid,
                    protocol: this.$store.state.realProtocol, // http: or https:
                    host: this.$store.state.realHost, // localhost:8080
                    rootpath: '/', // '/'
                    token: dat.strToken,
                    pbconf: pbconf1, // This is optional, if no pbconf, this will be live.
                    hlsver: 'v1', // v1 is for ts, v2 is for fmp4
                    session: window.localStorage.ac_session
                };

                var end = new Date(dat.strEndTime).getTime();
                var starf = new Date(dat.strStartTime).getTime();
                var starfend = (end - starf) / 1000; // 时间差
                this.max = starfend;
                if (this.videoUrlList.length == 1) {
                    this.backVideo1 = new H5sPlayerRTC(conf);
                    this.backVideo1.connect();
                    setTimeout(
                        function () {
                            this.backVideo1.start();
                        }.bind(this),
                        500
                    );
                }

                if (this.videoUrlList.length == 2) {
                    this.backVideo2 = new H5sPlayerRTC(conf);
                    this.backVideo2.connect();
                    setTimeout(
                        function () {
                            this.backVideo2.start();
                        }.bind(this),
                        500
                    );
                }

                if (this.videoUrlList.length == 3) {
                    this.backVideo3 = new H5sPlayerRTC(conf);
                    this.backVideo3.connect();
                    setTimeout(
                        function () {
                            this.backVideo3.start();
                        }.bind(this),
                        500
                    );
                }
                if (this.videoUrlList.length == 4) {
                    this.backVideo4 = new H5sPlayerRTC(conf);
                    this.backVideo4.connect();
                    setTimeout(
                        function () {
                            this.backVideo4.start();
                        }.bind(this),
                        500
                    );
                }
                if (this.videoUrlList.length == 5) {
                    this.backVideo5 = new H5sPlayerRTC(conf);
                    this.backVideo5.connect();
                    setTimeout(
                        function () {
                            this.backVideo5.start();
                        }.bind(this),
                        500
                    );
                }
                if (this.videoUrlList.length == 6) {
                    this.backVideo6 = new H5sPlayerRTC(conf);
                    this.backVideo6.connect();
                    setTimeout(
                        function () {
                            this.backVideo6.start();
                        }.bind(this),
                        500
                    );
                }
                if (this.videoUrlList.length == 7) {
                    this.backVideo7 = new H5sPlayerRTC(conf);
                    this.backVideo7.connect();
                    setTimeout(
                        function () {
                            this.backVideo7.start();
                        }.bind(this),
                        500
                    );
                }
                if (this.videoUrlList.length == 8) {
                    this.backVideo8 = new H5sPlayerRTC(conf);
                    this.backVideo8.connect();
                    setTimeout(
                        function () {
                            this.backVideo8.start();
                        }.bind(this),
                        500
                    );
                }
                if (this.videoUrlList.length == 9) {
                    this.backVideo9 = new H5sPlayerRTC(conf);
                    this.backVideo9.connect();
                    setTimeout(
                        function () {
                            this.backVideo9.start();
                        }.bind(this),
                        500
                    );
                }
            } else {
                this.picModal = true;
                this.url = this.$store.state.serverUrl;
                this.url += path;
            }
        },

        // 进入全屏后调整样式
        updateUIEnterFullScreen () {
            $('div[name="flex"]').height(screen.height / this.rows);
        },

        // 退出全屏后调整样式
        updateUIExitFullScreen () {
            if (!document.fullscreenElement && !document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement) {
                $('div[name="flex"]').height(this.contentHeight / this.rows);
            }
        },

        // 面板全部通道全屏
        panelFullScreen (event) {
            var elem = document.getElementById('videoPanel');
            if (document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled) {
                if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) {
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                    } else if (document.webkitExitFullscreen) {
                        document.webkitExitFullscreen();
                    } else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen();
                    } else if (document.msExitFullscreen) {
                        document.msExitFullscreen();
                    }
                    this.updateUIExitFullScreen();
                } else {
                    if (elem.requestFullscreen) {
                        elem.requestFullscreen();
                    } else if (elem.webkitRequestFullscreen) {
                        elem.webkitRequestFullscreen();
                    } else if (elem.mozRequestFullScreen) {
                        elem.mozRequestFullScreen();
                    } else if (elem.msRequestFullscreen) {
                        elem.msRequestFullscreen();
                    }
                    this.updateUIEnterFullScreen();
                    if (document.addEventListener) {
                        document.addEventListener('webkitfullscreenchange', this.updateUIExitFullScreen, false);
                        document.addEventListener('mozfullscreenchange', this.updateUIExitFullScreen, false);
                        document.addEventListener('fullscreenchange', this.updateUIExitFullScreen, false);
                        document.addEventListener('MSFullscreenChange', this.updateUIExitFullScreen, false);
                    }
                }
            } else {
                console.log('Fullscreen is not supported on your browser.');
            }
        },

        // 更新UI高度
        updateUI () {
            if ($(document.body).width() < 768) {
                this.contentHeight = $(document.body).height() * 0.4;
            } else {
                this.contentHeight = $(document.body).height() * 0.8 - this.videoPerHeight;
            }
            $('div[name="flex"]').height(this.contentHeight / this.rows);
            let that = this;
            if (H5siOS() === true) {
                $('.h5video').prop('controls', true);
            }
        },

        // 改变页面通道数
        changePanel (event, no) {
            this.videoPanelClass = 'videoPanelClass' + no;
            console.log('his.videoPanelClass---', this.videoPanelClass);
            this.changePanelNum = no;
            let data = $(event.target).data('row');
            data = data.split('|');
            let cols = data[1];
            let rows = data[0];
            let that = this;
            Object.assign(this.$data, {
                rows: parseInt(rows),
                cols: parseInt(cols)
            });
            // Vue.nextTick(function() {
            //   $('div[name="flex"]').height(that.contentHeight / rows);
            // });

            if (this.screenWidth <= 1280) {
                switch (cols) {
                    case '1':
                        this.setZoom = 0;
                        break;
                    case '2':
                        this.setZoom = 0.72;
                        break;
                    case '3':
                        this.setZoom = 0.5;
                        break;
                    case '4':
                        this.setZoom = 0.44;
                        break;
                }
            } else {
                switch (cols) {
                    case '1':
                        this.setZoom = 1.4;
                        break;
                    case '2':
                        this.setZoom = 1;
                        break;
                    case '3':
                        this.setZoom = 0.68;
                        break;
                    case '4':
                        this.setZoom = 0.5;
                        break;
                }
            }
            this.$root.bus.$emit('changeZoom', this.setZoom);
        },

        // 设定指定行列并修改样式
        videoClick (r, c, $event) {
            let aimDom = $($event.target).parents('.frame');
            this.clickVideoId = 'h' + r + c;
            this.clickH5VideoId = 'hvideo' + r + c;
            this.selectCol = c;
            this.selectRow = r;
            if (!aimDom.hasClass('videoClickLight')) {
                $('#videoPanel div[class*="videoClickLight"]').removeClass('videoClickLight');
                aimDom.addClass('videoClickLight');
                this.roadTag = true;
            } else {
                $('#videoPanel div[class*="videoClickLight"]').removeClass('videoClickLight');
                let next = this.autoPlayNext(this.clickH5VideoId);
                if (next === undefined) {
                    this.clickH5VideoId = 'hvideo11';
                    this.clickVideoId = 'h11';
                    return;
                }
                this.clickH5VideoId = 'hvideo' + next;
                this.clickVideoId = 'h' + next;
                this.roadTag = false;
            }
        },

        // 整理树分支数据
        sortTreeDat (dat) {
            let obj = {};
            let target = {};
            let option = [];
            for (let i = 0; i < dat.length; i++) {
                obj = {};
                target = dat[i];
                obj.label = target.Path.substring(3);
                obj.state = false;
                obj.stateHf = false;
                obj.realData = target;
                option.push(obj);
            }
            this.onlineData[0].children = option;
            this.$store.commit('getVideoList', this.onlineData[0].children); //数据仓库存值

            if (this.onlineData[0].children.length == 0) {
                this.loadingEquipList = false;
            }
        },

        // 切换视频
        changeVideo (data) {
            let videoList = this.$store.state.videoList;
            let onlineData = this.onlineData[0].children;

            let isNo = true;
            console.log('1111', this.$store);

            if (videoList.length > 0) {
                videoList.forEach((item, i) => {
                    if (data.label === item.label && item.state) {
                        this.messageType('warning', '当前视频已开启');
                        isNo = false;
                        return;
                    }
                });
            }
            if (isNo) {
                onlineData.forEach((item, i) => {
                    if (data.label === item.label) {
                        item.state = true;
                    }
                });

                this.onlineData[0].children = onlineData;
                this.$store.commit('getVideoList', onlineData); //数据仓库存值

                let next = '';
                this.realData = data.realData;
                if (data.children) {
                    return;
                }
                let choosedTitle = this.realData.Path;
                let titleName = choosedTitle.split('%')[0] + ' ● ' + choosedTitle.split('%')[1];
                this.$root.bus.$emit('videoPlay', this.realData, this.clickH5VideoId, this.cProto, 'sub', this.clickVideoId); // 这里视频播放默认为主码流

                // 在没选中指定窗口的情况下，自动接下一个窗口播放视频
                if (!this.roadTag) {
                    next = this.autoPlayNext(this.clickH5VideoId);
                    if (next === undefined) {
                        this.clickH5VideoId = 'hvideo11';
                        this.clickVideoId = 'h11';
                        return;
                    }
                    this.clickH5VideoId = 'hvideo' + next;
                    this.clickVideoId = 'h' + next;
                }
            }
        },

        // 自动选择下一个播放框
        autoPlayNext (id) {
            let num = id.slice(-2);
            let numSet = num.split('');
            let result = '';
            for (let i in numSet) {
                numSet[i] = parseInt(numSet[i]);
            }
            if (numSet[1] < this.rows) {
                numSet[1] += 1;
                result = numSet[0] + '' + numSet[1];
                return result;
            } else if (numSet[0] < this.rows) {
                numSet[0] += 1;
                numSet[1] = 1;
                result = numSet[0] + '' + numSet[1];
                return result;
            }
        },

        // 记录正在使用的监控视频
        addUsingEq (eqName) {
            var set = true;
            $('.titleName').each((index, item) => {
                if ($(item).text() === eqName) {
                    set = false;
                }
            });
            return set;
        },

        // 选择监控设备
        chooseEq (data) {
            let eqName = data.realData.Path;
            let onlineData = this.onlineData[0].children;

            eqName = eqName.split('%');
            this.backEqName = eqName[0] + ' ● ' + eqName[1];

            onlineData.forEach((item, i) => {
                item.stateHf = false;
                if (item.label === data.label) {
                    item.stateHf = true;
                }
            });
            if (data.children) {
                return;
            }
            this.cToken = data.realData.token;
            this.searchRecord();
        },

        // 查找回放记录
        searchRecord () {
            if (this.searchTime.length == 0) {
                this.docData = [];
                return false;
            }
            let startTime = this.searchTime[0].toISOString();
            let endTime = this.searchTime[1].toISOString();

            if (!this.cToken) {
                this.$Notice.info({
                    title: '请先选择对应设备！'
                });
                return;
            }
            this.docData = [];
            this.$api
                .getVideoSearch({
                    hostUrl: '/api/v1/Search',
                    session: window.localStorage.ac_session,
                    token: this.cToken,
                    type: this.searchType,
                    start: startTime,
                    end: endTime
                })
                .then(res => {
                    var result = JSON.parse(res.data.data);
                    let dat = result.record;
                    if (dat.length <= 0) {
                        this.messageType('warning', '该日期内没有对应记录！');
                        return;
                    }

                    this.docData = [];
                    let obj = {};
                    let strPathTo = '';

                    if (dat.length > 0) {
                        dat.forEach((item, i) => {
                            obj = {};
                            if (this.searchType === 'record') {
                                obj.info = this.timeFormat(item.strStartTime) + ' - ' + this.timeFormat(item.strEndTime);
                            } else {
                                obj.info = this.timeFormat(item.strEndTime);
                            }

                            strPathTo = item.strPath.split('/');
                            item.strPathTo = strPathTo[strPathTo.length - 1];
                            item.downUrl = this.$store.state.serverUrl + item.strPath;
                            item.active = '';
                            obj.data = item;
                            this.docData.push(obj);
                        });
                    }
                })
                .catch(err => {
                    console.log(' 查找回放记录失败！', err);
                });
        },

        // 时间格式转换 0
        timeFormat (val) {
            let arr = val.split('T');
            let dateResult = '';
            let timeResult = '';
            let date = arr[0];
            let time = arr[1];

            date = date.split('-');
            dateResult = date[0] + '/' + date[1] + '/' + date[2] + ' ';
            timeResult = time.substring(0, 8);
            return dateResult + ' ' + timeResult;
        },

        // 登录H5Stream平台
        streamLogin () {
            // 登录H5Stream平台
            this.$api
                .loginVideo({
                    hostUrl: '/api/v1/Login',
                    user: 'admin',
                    password: '827ccb0eea8a706c4c34a16891f84e7b'
                })
                .then(res => {
                    var result = res.data;
                    if (result.code == 200 && result.data.length > 0) {
                        var resultData = JSON.parse(result.data);
                        window.localStorage.ac_session = resultData.strSession;
                    }
                })
                .catch(err => {
                    console.log(' 登录H5Stream平台失败！', err);
                });
        },

        // 获取所有视频配置
        getVideoConfigs () {
            if (this.onlineData[0].children.length == 0) {
                this.loadingEquipList = false;
            }
            this.$api
                .getVideoConfig({})
                .then(res => {
                    var result = res.data;
                    if (result.code == 200 && result.data.length > 0) {
                        var itemEquipNo = -1;
                        for (var i = 0; i < result.data.length; i++) {
                            if (result.data[i].communicationDrv == 'GWLSTECH.NET.dll') {
                                itemEquipNo = result.data[i].equipNo;
                                this.$store.state.realProtocol = result.data[i].reserve1;
                                this.$store.state.realHost = result.data[i].equipAddr;
                                break;
                            }
                        }
                        if (itemEquipNo != -1) {
                            this.getVideoInfor(itemEquipNo);
                        }
                    } else {
                        this.$message.error('获取所有视频配置信息失败！');
                    }
                })
                .catch(err => {
                    console.log(' 获取所有视频配置失败！');
                });
        },

        // 判断字符串是否为空
        isNull (str) {
            return str === null || str.length === 0 || str === '';
        },

        // 获取所有视频信息
        getVideoInfor (strEquipNo) {
            this.loadingEquipList = true;
            this.$api
                .getVideoAllInfo({
                    equip_no: strEquipNo
                })
                .then(res => {
                    var result = res.data;
                    if (result.code == 200 && result.data.length > 0) {
                        this.loadingEquipList = false;

                        var realDataArr = [];
                        for (var i = 0; i < result.data.length; i++) {
                            realDataArr.push({
                                ID: result.data[i].id,
                                EquipNum: result.data[i].equipNum,
                                ChannelName: result.data[i].channelName,
                                StreamType: result.data[i].channelType,
                                Path: result.data[i].path,
                                token: result.data[i].reserve1
                            });
                        }
                        this.sortTreeDat(realDataArr);
                    } else {
                        this.loadingEquipList = false;
                    }
                })
                .catch(err => {
                    this.loadingEquipList = false;
                    console.log('获取所有视频信息失败！');
                });
        }
    }
};
</script>

<style lang="scss" src="@assets/styles/videoPlaybackCom.scss" scoped></style>
